<template>
  <section class="sp-control">
    <el-button type="primary" v-if="button" @click="create">{{ buttonText }}</el-button>
    <el-input :placeholder="value" v-model="query" class="sp-control__search" clearable @change="search">
      <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
    </el-input>
  </section>
</template>

<script>
export default {
  name: 'SpSearchSimple',
  components: {},
  props: {
    button: {
      type: Boolean,
      default: true
    },
    buttonText: {
      type: String,
      default: '新增'
    },
    value: {
      type: String,
      default: '快速搜索'
    }
  },
  data () {
    return {
      query: ''
    }
  },
  created () {},
  mounted () {},
  destroyed () {},
  methods: {
    create () {
      this.$emit('create')
    },
    search () {
      this.$emit('search', { query: this.query })
    }
  }
}
</script>

<style lang="scss" scoped>
  .sp-control {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &__search {
      width: 230px;
    }
  }
</style>
